<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { timeFormat, toYuan, timeFormatYMD, copyToCliboard } from '@/hooks/util'
import * as quotationRulesApi from '@/api/quotationRules'
import * as accountApi from '@/api/account'
import { message } from 'ant-design-vue'
import AddRole from './components/AddRole.vue'
import LdleFish from './LdleFish.vue'
import ImportRule from './components/ImportRule.vue'
import AddTemplate from '../../components/Modal/index.vue'
import addTemplateContent from './components/AddTemplate.vue'

import SendTemplate from './components/SendTemplateWx.vue'
const sendTemplateRef = ref()

const screenWidth = ref(0)
const screenHeight = ref(0)

function updateScreenSize() {
  screenWidth.value = window.innerWidth
  screenHeight.value = window.innerHeight
  console.log(screenWidth.value, screenHeight.value, 'screenWidth.value, screenHeight.value')
}

const AddTemplateRef = ref()

const route = useRoute()
const router = useRouter()

const AddRoleRef = ref()
const ImportRuleRef = ref()

const activeKey = ref<string>('1')

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  // console.log(page, pageSize)
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  robotId?: string
  [propName: string]: any
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const dataSource = ref([])
const columns = [
  {
    title: '规则信息',
    key: 'ruleName',
    width: 300,
  },
  {
    title: '报价信息',
    key: 'price',
    width: 400,
  },
  {
    title: '影片类型',
    key: 'planType',
    width: 400,
  },
  {
    title: '省份/城市',
    key: 'province',
    width: 400,
  },
  {
    title: '影院/影厅',
    key: 'fileHall',
    width: 400,
  },
  {
    title: '影片/票数/包含院线',
    key: 'filmName',
    width: 400,
  },
  {
    title: '日期/时间/排除院线',
    key: 'beginShowTime',
    width: 400,
  },
  {
    title: '首选/备选渠道',
    key: 'matchChannel',
    width: 400,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
  },
]
// 表格多选
const selectedRowKey = ref<Array<any>>([])
const selectedRow = ref<Array<object>>([])
const onSelectChange = (selectedRowKeys: any[], selectedRows: any[]) => {
  // console.log('selectedRowKey=', selectedRowKeys)
  selectedRowKey.value = selectedRowKeys

  // console.log('selectedRow=', selectedRows)
  selectedRow.value = selectedRows
}

const quotationTypeList = ref<SelectProps['options']>([
  {
    label: '比例',
    value: '1',
  },
  {
    label: '减法',
    value: '2',
  },
  {
    label: '固定金额',
    value: '3',
  },
  {
    label: '溢价',
    value: '4',
  },
])

// 处理最终报价调整类型
const finalPriceAdjustTypeList = ref<SelectProps['options']>([
  {
    label: '四舍五入到整数元',
    value: 1,
  },
  {
    label: '四舍五入到元-0.1',
    value: 2,
  },
  {
    label: '到0.5/整数元',
    value: 3,
  },
  {
    label: '不调整',
    value: 0,
  },
])

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize

  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

const getList = async () => {
  loading.value = true
  try {
    let {
      state,
      data,
      message: msg,
    } = await quotationRulesApi.getQuotationRuleList(searchParams.value)
    if (state === 200) {
      if (data) {
        data?.list.forEach((item: any) => {
          item.ruleStatus ? (item.ruleStatus = true) : (item.ruleStatus = false)
        })
        dataSource.value = data?.list || []
        pagination.value.total = Number(data.totalCount)

        if (dataSource.value.length == 0) {
          // activeKey.value = '2'
        }
      } else {
        // message.error('~')
        dataSource.value = []
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络错误~')
  }
  loading.value = false
}

// 拉取机器人列表
let okRobat = ref<string>()
let okRobatLabel = ref<string>()
import type { SelectProps } from 'ant-design-vue'
const robatList = ref<SelectProps['options']>([])
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getRobatList = async () => {
  const params = {
    currentPage: 1,
    pageSize: 100,
  }
  try {
    let { state, data, message: msg } = await accountApi.getList(params)
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })

      optionsArr.value = data.list
      if (data.list.length == 0) {
        if (dataSource.value.length == 0) {
          // activeKey.value = '2'
        }
      } else if (data.list.length > 0) {
        selectRobat(data.list[0].id)
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const selectRobat = (selectValue: unknown) => {
  okRobat.value = selectValue as string
  okRobatLabel.value = optionList.value.find(item => item.value == selectValue)?.label
  searchParams.value.robotId = okRobat.value
  getList()
}

onMounted(() => {
  getRobatList()
  getGroupList()
  // getList()
  updateScreenSize()
})

// 查询
const formRef = ref()
interface FormState {
  ruleName?: string
  quotationType?: string
  finalPriceAdjustType?: string | number
}
const formState = reactive<FormState>({})
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    // console.log('formState=', formState)
    searchParams.value.ruleName = formState.quotationType != '' && formState.ruleName
    searchParams.value.quotationType = formState.quotationType != '' && formState.quotationType
    searchParams.value.finalPriceAdjustType =
      formState.finalPriceAdjustType != '' && formState.finalPriceAdjustType
    // console.log('searchParams=', searchParams.value)
    getList()
  })
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1

  formRef.value.resetFields()

  formRef.value.resetFields()
  for (let key in searchParams.value) {
    if (key != 'currentPage' && key != 'pageSize' && key != 'robotId')
      searchParams.value.hasOwnProperty(key) && delete searchParams.value[key]
  }

  getList()
}

const del = async (id: string) => {
  try {
    const { state, message: msg } = await quotationRulesApi.deleteQuotationRule({ id })
    if (state === 200) {
      message.success('删除成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const addRole = () => {
  AddRoleRef.value.showModal(okRobat.value, {}, 1)
}

const edit = (record: any) => {
  if (record.ruleStatus == '1') {
    message.error('报价规则已启用，不能修改')
  } else {
    AddRoleRef.value.showModal(okRobat.value, record, 1)
  }
}

const handleChangeRules = async (record: any) => {
  try {
    const { state, message: msg } = await quotationRulesApi.EditRuleState({
      id: record.id,
      ruleStatus: record.ruleStatus ? 1 : 0,
    })
    if (state === 200) {
      message.success('操作成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 过滤
const getFilterlist = (list: Array<any> = [], type: number) => {
  if (list.length > 0) {
    // console.log('list', list.filter(item => item.containStatus == type))

    return list.filter(item => item.containStatus == type)
  } else {
    return []
  }
}

// 推送
const groupList = ref<SelectProps['options']>([])
const groupId = ref<string>()
const optionsArr = ref<SelectProps['options']>([])
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getWechatRobotGroupList()
    if (state === 200) {
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectGroup = (selectValue: any) => {
  groupId.value = selectValue as string
  sendRobat.value = optionsArr
    .value!.filter(item => item.groupId == groupId.value)
    .map(item => item.id)
}

// 推送配置
let sendRobat = ref<Array<string>>()
const selectSendRobat = (selectValue: any) => {
  sendRobat.value = selectValue
}
const pushRobot = async () => {
  console.log('okRobat=', okRobat.value)
  console.log('sendRobat=', sendRobat.value)
  let params = {
    acceptRobotIds: sendRobat.value,
    channel: 1,
    sendRobotId: okRobat.value,
  }
  try {
    const { state, message: msg } = await quotationRulesApi.quotationRulePushArriveRobots(params)
    if (state === 200) {
      message.success('操作成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const sendOk = () => pushRobot()

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}

// 复制规则
const copyRule = (id: string) => {
  copyToCliboard(id)
}

// 导入规则
const importRole = () => {
  ImportRuleRef.value.showModal(okRobat.value, 1, okRobatLabel.value)
}

// 处理2/3D
const edit23D = (str: string) => {
  if (str != '0') {
    let list = str.split(',').map(item => {
      if (item == '1') {
        return '2D'
      } else if (item == '2') {
        return '3D'
      } else if (item == '3') {
        return '2/3D'
      }
    })
    return list.join(',')
  } else {
    return '2D,3D,2/3D'
  }
}
const TemplateId = ref('')
const getTHEID = id => {
  console.log('id=', id)
  TemplateId.value = id
}

const handleConfirm = () => {
  AddTemplateRef.value.setVisible(false)
}
</script>

<template>
  <page-container :title="route.meta.title">
    <a-alert
      message="重要提醒"
      description="当前显示的为第一个账号的数据，如需加载指定账号数据请在右上角输入框进行选择微信账号/选择闲鱼账号操作！"
      type="warning"
      show-icon
      style="margin-bottom: 10px"
    />

    <a-card style="overflow-x: scroll">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="闲鱼" force-render>
          <LdleFish></LdleFish>
        </a-tab-pane>
        <a-tab-pane key="2" tab="微信">
          <div style="margin: 5px 0; text-align: right">
            <span>选择微信账号：</span>
            <a-select
              v-model:value="okRobat"
              @change="selectRobat"
              placeholder="请选择"
              style="width: 200px; text-align: left"
              show-search
              :options="optionList"
              :filter-option="filterOption"
            >
              <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </div>

          <div class="searchBox">
            <a-form ref="formRef" layout="inline" :model="formState">
              <a-form-item label="规则名称" name="ruleName">
                <a-input
                  v-model:value="formState.ruleName"
                  placeholder="规则名称"
                  style="width: 200px"
                />
              </a-form-item>
              <a-form-item label="报价方式" name="quotationType">
                <a-select
                  v-model:value="formState.quotationType"
                  placeholder="请选择"
                  style="width: 200px"
                >
                  <a-select-option
                    v-for="(item, index) in quotationTypeList"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <!-- <a-form-item name="finalPriceAdjustType">
                <template #label>
                  <span style="margin-left: 15px">报价调整类型</span>
                </template>
                <a-select
                  v-model:value="formState.finalPriceAdjustType"
                  placeholder="请选择"
                  style="width: 150px"
                >
                  <a-select-option
                    v-for="(item, index) in finalPriceAdjustTypeList"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item> -->
            </a-form>

            <a-button type="primary" @click="search" style="border-radius: 6px">
              <template #icon>
                <SearchOutlined />
              </template>
              搜索
            </a-button>
            <a-button @click="reset">重置</a-button>
            <a-button type="primary" @click="addRole">新增规则</a-button>
            <a-button type="primary" @click="importRole">导入规则</a-button>
            <a-button type="primary" @click="sendTemplateRef.showModal()">模板列表</a-button>
          </div>

          <a-alert
            description="小提示：只要鼠标在表格上，按住左Shift键并滚动鼠标滚轮就可以横向滚动表格"
            type="info"
            banner
            style="margin-bottom: 10px; padding: 10px"
          />

          <a-table
            style="overflow-x: scroll"
            :columns="columns"
            :data-source="dataSource"
            :pagination="pagination"
            :loading="loading"
            @change="changePage"
            rowKey="id"
            size="small"
            :scroll="{ x: 100 }"
          >
            <!-- :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }" -->
            <template #emptyText>
              <a-empty description="暂无数据" />
            </template>

            <template #headerCell="{ column }">
              <template v-if="column.key === 'id'">
                <span>id</span>
              </template>
            </template>

            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'id'">
                <div style="width: 150px">{{ record.id }}</div>
              </template>

              <template v-else-if="column.key === 'ruleName'">
                <a-descriptions bordered size="small" :column="1">
                  <a-descriptions-item label="规则名称">
                    {{ record.ruleName }}
                    <a @click="copyRule(record.id)">
                      <CopyOutlined />
                    </a>
                  </a-descriptions-item>

                  <a-descriptions-item label="影院名匹配">
                    <div v-if="record.cinemaNameType == 1">精准匹配</div>
                    <div v-if="record.cinemaNameType == 2">模糊匹配</div>
                  </a-descriptions-item>

                  <!-- <a-descriptions-item label="2/3D">
                      <span>{{ edit23D(record.customFilmType) }}</span>
                    </a-descriptions-item> -->

                  <a-descriptions-item label="开关状态">
                    <div v-if="record.ruleStatus == 0">
                      <span
                        style="
                          width: 6px;
                          height: 6px;
                          background-color: red;
                          display: inline-block;
                          border-radius: 50%;
                        "
                      ></span>
                      已停用
                    </div>
                    <div v-if="record.ruleStatus == 1">
                      <span
                        style="
                          width: 6px;
                          height: 6px;
                          background-color: #01ff01;
                          display: inline-block;
                          border-radius: 50%;
                        "
                      ></span>
                      已启用
                    </div>
                  </a-descriptions-item>

                  <a-descriptions-item label="更新时间">
                    {{ timeFormat(record.updateTime) }}
                  </a-descriptions-item>
                </a-descriptions>
              </template>

              <template v-else-if="column.key === 'planType'">
                <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '120px' }">
                  <!-- 2/3d - 新 -->
                  <a-descriptions-item label="包含影片类型">
                    <a-tooltip
                      placement="top"
                      v-if="getFilterlist(record.planTypeList, 1).length > 0"
                    >
                      <template #title>
                        <template v-for="item in record.planTypeList">
                          <a-tag v-if="item.containStatus == 1" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.planTypeList">
                          <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="排除影片类型">
                    <a-tooltip
                      placement="top"
                      v-if="getFilterlist(record.planTypeList, 0).length > 0"
                    >
                      <template #title>
                        <template v-for="item in record.planTypeList">
                          <a-tag v-if="item.containStatus == 0" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.planTypeList">
                          <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>
                  <!-- 2/3d - 新 -->

                  <a-descriptions-item label="报价调整类型">
                    <div v-if="record.finalPriceAdjustType == 0">不调整</div>
                    <div v-if="record.finalPriceAdjustType == 1">四舍五入到整数元</div>
                    <div v-if="record.finalPriceAdjustType == 2">四舍五入到元-0.1</div>
                    <div v-if="record.finalPriceAdjustType == 3">到0.5/整数元</div>
                  </a-descriptions-item>
                </a-descriptions>
              </template>

              <template v-else-if="column.key === 'matchChannel'">
                <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '140px' }">
                  <a-descriptions-item label="首选供应渠道">
                    <a-tag color="blue" v-if="record.matchChannel == 3">麻花电影票（可限价）</a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 5">芒果电影票（一口价）</a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 6">哈哈电影票</a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 11">
                      守兔电影票（一口价）
                    </a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 7">守兔电影票（可限价）</a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 8">星驰电影票（一口价）</a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 9">
                      哈哈电影快票（固定9折）
                    </a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 10">
                      影划算电影票（可限价）
                    </a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 88">芒果电影票</a-tag>
                    <a-tag color="blue" v-if="record.matchChannel == 66">芒果一口价</a-tag>
                  </a-descriptions-item>
                  <a-descriptions-item label="备选供应渠道">
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 3">
                      麻花电影票（可限价）
                    </a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 5">
                      芒果电影票（一口价）
                    </a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 6">哈哈电影票</a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 11">
                      守兔电影票（一口价）
                    </a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 7">
                      守兔电影票（可限价）
                    </a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 8">
                      星驰电影票（一口价）
                    </a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 9">
                      哈哈电影快票（固定9折）
                    </a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 10">
                      影划算电影票（可限价）
                    </a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 88">芒果电影票（可限价）</a-tag>
                    <a-tag color="blue" v-if="record.slaveMatchChannel == 66">芒果一口价</a-tag>

                    <a-tag color="blue" v-if="record.slaveMatchChannel == 0">不使用</a-tag>
                  </a-descriptions-item>
                  <a-descriptions-item label="是否开启限价">
                    <a-tag color="blue" v-if="record.enableLimitPrice == 0">不启用</a-tag>
                    <a-tag color="blue" v-if="record.enableLimitPrice == 1">启用</a-tag>
                  </a-descriptions-item>
                </a-descriptions>
              </template>

              <template v-else-if="column.key === 'province'">
                <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
                  <a-descriptions-item label="包含省份">
                    <a-tooltip
                      placement="top"
                      v-if="getFilterlist(record.provinceList, 1).length > 0"
                    >
                      <template #title>
                        <template v-for="item in record.provinceList">
                          <a-tag v-if="item.containStatus == 1" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.provinceList">
                          <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="排除省份">
                    <a-tooltip
                      placement="top"
                      v-if="getFilterlist(record.provinceList, 0).length > 0"
                    >
                      <template #title>
                        <template v-for="item in record.provinceList">
                          <a-tag v-if="item.containStatus == 0" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.provinceList">
                          <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="包含城市">
                    <a-tooltip placement="top" v-if="getFilterlist(record.cityList, 1).length > 0">
                      <template #title>
                        <template v-for="item in record.cityList">
                          <a-tag v-if="item.containStatus == 1" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.cityList">
                          <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="排除城市">
                    <a-tooltip placement="top" v-if="getFilterlist(record.cityList, 0).length > 0">
                      <template #title>
                        <template v-for="item in record.cityList">
                          <a-tag v-if="item.containStatus == 0" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.cityList">
                          <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>
                </a-descriptions>
              </template>

              <template v-else-if="column.key === 'fileHall'">
                <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
                  <a-descriptions-item label="包含影院">
                    <a-tooltip
                      placement="top"
                      v-if="getFilterlist(record.cinemaList, 1).length > 0"
                    >
                      <template #title>
                        <template v-for="item in record.cinemaList">
                          <a-tag v-if="item.containStatus == 1" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.cinemaList">
                          <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="排除影院">
                    <a-tooltip
                      placement="top"
                      v-if="getFilterlist(record.cinemaList, 0).length > 0"
                    >
                      <template #title>
                        <template v-for="item in record.cinemaList">
                          <a-tag v-if="item.containStatus == 0" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.cinemaList">
                          <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="包含影厅">
                    <a-tooltip
                      placement="top"
                      v-if="getFilterlist(record.filmHallList, 1).length > 0"
                    >
                      <template #title>
                        <template v-for="item in record.filmHallList">
                          <a-tag v-if="item.containStatus == 1" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.filmHallList">
                          <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="排除影厅">
                    <a-tooltip
                      placement="top"
                      v-if="getFilterlist(record.filmHallList, 0).length > 0"
                    >
                      <template #title>
                        <template v-for="item in record.filmHallList">
                          <a-tag v-if="item.containStatus == 0" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.filmHallList">
                          <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>
                </a-descriptions>
              </template>

              <template v-else-if="column.key === 'filmName'">
                <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
                  <a-descriptions-item label="包含影片">
                    <a-tooltip placement="top" v-if="getFilterlist(record.filmList, 1).length > 0">
                      <template #title>
                        <template v-for="item in record.filmList">
                          <a-tag v-if="item.containStatus == 1" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.filmList">
                          <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="排除影片">
                    <a-tooltip placement="top" v-if="getFilterlist(record.filmList, 0).length > 0">
                      <template #title>
                        <template v-for="item in record.filmList">
                          <a-tag v-if="item.containStatus == 0" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.filmList">
                          <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="票数">
                    <div v-if="record.seatCount == '0'">不限制</div>
                    <div v-else>{{ record.seatCount }}张</div>
                  </a-descriptions-item>

                  <a-descriptions-item label="包含院线">
                    <a-tooltip placement="top" v-if="getFilterlist(record.lineList, 1).length > 0">
                      <template #title>
                        <template v-for="item in record.lineList">
                          <a-tag v-if="item.containStatus == 1" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.lineList">
                          <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>
                </a-descriptions>
              </template>

              <template v-else-if="column.key === 'beginShowTime'">
                <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
                  <a-descriptions-item label="放映日期">
                    <div v-if="record.beginLimitTime != '0'">
                      {{ timeFormatYMD(record.beginLimitTime) }} ~
                      {{ timeFormatYMD(record.endLimitTime) }}
                    </div>
                    <div v-else>不限制</div>
                  </a-descriptions-item>
                  <a-descriptions-item label="放映时间">
                    <div>{{ record.beginTime }} - {{ record.endTime }}</div>
                  </a-descriptions-item>
                  <a-descriptions-item label="星期">
                    <span v-if="record.week == '0'">全部</span>
                    <span v-else v-for="(item, index) in record.week.split(',')">
                      周{{ item }},
                    </span>
                  </a-descriptions-item>

                  <a-descriptions-item label="排除院线">
                    <a-tooltip placement="top" v-if="getFilterlist(record.lineList, 0).length > 0">
                      <template #title>
                        <template v-for="item in record.lineList">
                          <a-tag v-if="item.containStatus == 0" color="blue">
                            {{ item.name }}
                          </a-tag>
                        </template>
                      </template>
                      <div class="hiddenText">
                        <template v-for="item in record.lineList">
                          <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                        </template>
                      </div>
                    </a-tooltip>
                    <div v-else>不限制</div>
                  </a-descriptions-item>
                </a-descriptions>
              </template>

              <template v-else-if="column.key === 'price'">
                <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '110px' }">
                  <a-descriptions-item label="猫淘价区间">
                    <div>
                      {{ toYuan(record.marketPriceBegin) }} ~
                      {{ toYuan(record.marketPriceEnd) }}
                    </div>
                  </a-descriptions-item>

                  <a-descriptions-item label="报价方式">
                    <span v-if="record.quotationType == 1">比例加减</span>
                    <span v-if="record.quotationType == 2">猫淘价减法</span>
                    <span v-if="record.quotationType == 3">固定金额</span>
                    <span v-if="record.quotationType == 4">溢价模式</span>
                  </a-descriptions-item>

                  <a-descriptions-item label="报价金额">
                    <span v-if="record.quotationType == 1">
                      【猫淘价 * {{ record.quotationPercent }}%】
                      <span style="color: #18d818" v-if="record.quotationDiscount >= 0">
                        +{{ toYuan(record.quotationDiscount) }}
                      </span>
                      <span style="color: red" v-else>
                        {{ toYuan(record.quotationDiscount) }}
                      </span>
                    </span>
                    <span v-if="record.quotationType == 2">
                      【猫淘价】
                      <span style="color: red">{{ toYuan(record.quotationDiscount) }}</span>
                    </span>
                    <span v-if="record.quotationType == 3">
                      {{ toYuan(record.quotationDiscount) }}
                    </span>
                    <span v-if="record.quotationType == 4">
                      {{ toYuan(record.quotationDiscount) }} + 【溢价部分】
                    </span>
                  </a-descriptions-item>

                  <a-descriptions-item label="单张限价">
                    <!-- <div>【报价】-{{ record.limitPrice }}</div> -->
                    <div v-if="record.limitPrice < 0">
                      【预估成本】 + {{ (0 - record.limitPrice) / 100 }}
                    </div>
                    <div v-if="record.limitPrice > 0">预估成本 - {{ record.limitPrice / 100 }}</div>
                  </a-descriptions-item>
                </a-descriptions>
              </template>

              <template v-else-if="column.key === 'action'">
                <div style="display: flex; align-items: center">
                  <a-switch
                    v-model:checked="record.ruleStatus"
                    @change="handleChangeRules(record)"
                  />
                  <div style="width: 20px"></div>

                  <div style="width: 100px">
                    <a-popconfirm
                      title="确定删除？"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="del(record.id)"
                    >
                      <a>删 除</a>
                    </a-popconfirm>
                    <a style="margin-left: 10px" @click="edit(record)">修 改</a>
                  </div>
                </div>
              </template>
            </template>
          </a-table>
          <!-- 推送 -->
          <div style="margin: 5px 0">
            <span>选择推送微信账号：</span>
            <a-select
              style="width: 150px"
              placeholder="请选择分组"
              v-model:value="groupId"
              @change="selectGroup"
            >
              <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
                {{ item.groupName }}
              </a-select-option>
            </a-select>
            <a-select
              style="width: 50%; margin-left: 5px"
              placeholder="请选择"
              mode="multiple"
              v-model:value="sendRobat"
              @change="selectSendRobat"
              allowClear
              show-search
              :options="optionList"
              :filter-option="filterOption"
            >
              <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-button type="primary" style="margin-left: 10px" @click="sendOk">确认推送</a-button>

            <a-button
              type="primary"
              style="margin-left: 10px"
              @click="AddTemplateRef.setVisible(true)"
            >
              设置为模板
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>

      <AddRole ref="AddRoleRef" @refresh="getList()"></AddRole>
      <ImportRule ref="ImportRuleRef" @refresh="getList()"></ImportRule>

      <AddTemplate
        :width="800"
        :height="800"
        title="请选择勾选单个模版进行保存"
        ref="AddTemplateRef"
        @onConfirmAdd="handleConfirm"
      >
        <template #contentValue>
          <addTemplateContent
            @sendTheID="getTHEID"
            :screenWidth="screenWidth"
            :screenHeight="screenHeight"
            :type="1"
          ></addTemplateContent>
        </template>
      </AddTemplate>
    </a-card>
    <SendTemplate ref="sendTemplateRef"></SendTemplate>
  </page-container>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}

.searchBox {
  margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}

a:hover {
  color: red;
}

.imgBox {
  width: 100px;
  height: 50px;

  img {
    height: 50px;
  }
}

.popoverImg {
  width: 300px;

  img {
    width: 100%;
  }
}

.robitStatusClass {
  text-align: center;
}
</style>
